<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#div1{width:200px;height:200px;background-color: yellow;position: absolute;}
    </style>
    <script>
        window.onload=function(){
            new Drag('div1');
        };

          //var oDiv=null;//拿到最外面作为全局变量，变量只需要声明一次就够了

        function Drag(id){//并不是每次都是'div1'，将id作为参数，构造一个Drag函数//对象的类，里面装的是属性
            var _this=this;
            this.disX=0;//初始值
            this.disY=0;//初始值
            this.oDiv=document.getElementById(id);
            this.oDiv.onmousedown=function(ev){
                _this.fnDown(ev);
            };
        }



          Drag.prototype.fnDown=function(ev){//鼠标按下
              var _this=this;
              var oEvent=ev||event;//事件对象
              this.disX=oEvent.clientX-this.oDiv.offsetLeft;//求固定的长度
              this.disY=oEvent.clientY-this.oDiv.offsetTop;//求固定的高度
            document.onmouseover=function(ev){
                _this.fnMove(ev);
            };
            document.onmouseup=function(){
                _this.fnUp();
            };
              return false;

        };

          Drag.prototype.fnMove=function(ev){//鼠标移动
            var oEvent=ev||event;
//                  求oDiv的位置，让oDiv物体跟着鼠标运动，就是让其位置变化
              this.oDiv.style.left=oEvent.clientX-this.disX+'px';
              this.oDiv.style.top=oEvent.clientY-this.disY+'px';
        };

          Drag.prototype.fnUp=function(){//鼠标抬起
 //       鼠标抬起，就需要把鼠标移动取消
            document.onmouseover=null;
            document.onmouseup=null;
        };

    </script>
</head>
<body>
<div id="div1">第三方士大夫</div>
第一步：需要把所有的函数嵌套全部拿出去；
第二步：将变量拿出去作为全局变量；
第三步：构造函数，并将变量转为属性；
第四步：再将函数变成方法；
</body>
</html>